/**
* @description: 电源设备新增
* @author: oahcoay
* @remark:
**/
<template>
  <view class="add-patrol-main">
    <nav-bar class="header" back title="电源设备新增" @goBack="goBack" />

    <div class="main-container">
      <div class="cable-info">
        <plateTitle title="" :isRequired="false" class="plate-title" />
        <view class="cable-info-container">
          <van-form ref="ruleForm">
            <van-cell-group v-for="(item, index) in currentData.visibleProps" :key="index">
              <!-- 不可编辑框 -->
              <van-field v-model="item.value" v-if="item.elementType === 'TEXT'" :required="item.isRequired" readonly input-align="right" :value="item.value" :label="item.title"
                @click="checkInfo(item)" :name="item.name" :rules="item.rules" error-message-align="right" />
              <!-- 弹出筛选框 -->
              <van-field v-if="item.elementType === 'PICKER'" :required="item.isRequired" readonly clickable input-align="right" :rules="item.rules" right-icon="arrow" v-model="item.text"
                :label="item.title" placeholder="点击选择" @click="checkPickerList(item)" />
              <!-- 弹出日期筛选框 -->
              <van-field v-if="item.elementType === 'TIMEPICKER'" :required="item.isRequired" readonly clickable input-align="right" :rules="item.rules" right-icon="arrow" v-model="item.text"
                :label="item.title" placeholder="点击选择" @click="checkPickerList(item)" />
              <!-- 输入框 -->
              <van-field v-if="item.elementType === 'INPUT'" :type="item.inputType" :required="item.isRequired" clickable input-align="right" :rules="item.rules" :value="item.value"
                :label="item.title" placeholder="请输入" @input="inputBlur($event, item)" />
              <!-- 输入带扫码 -->
              <van-field v-if="item.elementType === 'INPUT&SCAN'" :required="item.isRequired" input-align="right" right-icon="scan" @input="inputBlur($event, item)"
                @click-right-icon="scanQrcode(item)" :value="item.value" :label="item.title" />
            </van-cell-group>
          </van-form>
        </view>

      </div>

    </div>
    <!--按钮-->
    <van-button block v-if="!isView" @click="saveOptical">提交</van-button>
    <!--时间选择器-->
    <van-popup v-model="showTimePicker" position="bottom">
      <van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :formatter="formatter" :min-date="minDate" show-toolbar cancel-button-text="清空" @confirm="pickerConfirm"
        @cancel="pickerEmpty" />
    </van-popup>
    <!--选择器-->

    <van-popup v-model="showPicker" position="bottom">
      <van-picker ref="picker" :default-index="defaultPickerIndex" show-toolbar :columns="currentPickerList" cancel-button-text="清空" @confirm="pickerConfirm" @cancel="pickerEmpty"
        @change="pickerChange" />
    </van-popup>
    <van-popup v-model="showNamePicker" position="bottom">
      <van-picker ref="typePicker" show-toolbar :columns="typeColumns" cancel-button-text="清空" @confirm="onTypeConfirm" @cancel="pickerNameEmpty" />
    </van-popup>
    <van-popup v-model="showTorpPicker" position="bottom">
      <van-picker ref="typePicker" show-toolbar :columns="stateColumns" cancel-button-text="清空" @confirm="onStateConfirm" @cancel="pickerTorpEmpty" />
    </van-popup>
  </view>
</template>
<script>
import moment from 'moment/moment'

let infoOptical_add = {
  hideProps: {
    taskId: 'task001', //所属工单id    //必填
    siteid: 's001', //所属站点
    sitename: '', //所属站点
    tourOperId: '2', //巡检人ID  必填      userId放进来
    tourOperName: '2', //巡检人名称    必填       userName放进来
    producerIdCustom: '', // 自定义设备厂家名称
    modelnumberCustom: '' // 自定义设备型号名称
  },
  visibleProps: {
    // "equname": {
    //   title: "设备名称",
    //   keys: "equname",
    //   value: "",
    //   isRequired: true,
    //   elementType: "TEXT"
    // },   // 设备名称
    'dysblx': {
      title: '电源设备类型',
      keys: 'dysblx',
      value: '',
      text: '',
      isRequired: false,
      elementType: 'PICKER',
      name: 'dysblx',
      optionsParams: { type: 'power' } // 获取options需要的参数
    }, //电源设备类型
    axdy: {
      title: 'A相电压',
      keys: 'axdy',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'axdy',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //A相电压
    bxdy: {
      title: 'B相电压',
      keys: 'bxdy',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'bxdy',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //B相电压
    cxdy: {
      title: 'C相电压',
      keys: 'cxdy',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'cxdy',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //C相电压

    axdl: {
      title: 'A相电流',
      keys: 'axdl',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'axdl',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //A相电流
    bxdl: {
      title: 'B相电流',
      keys: 'bxdl',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'bxdl',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //B相电流
    cxdl: {
      title: 'C相电流',
      keys: 'cxdl',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'cxdl',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //C相电流

    fz: {
      title: '峰值',
      keys: 'fz',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'fz',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //峰值

    wggl: {
      title: '无功功率',
      keys: 'wggl',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'wggl',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //无功功率
    yggl: {
      title: '有功功率',
      keys: 'yggl',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'yggl',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //有功功率
    wd: {
      title: '温度',
      keys: 'wd',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'wd',
      rules: [{ required: true, trigger: 'onSubmit' }]
    }, //温度
    sd: {
      title: '湿度',
      keys: 'sd',
      value: '',
      isRequired: true,
      elementType: 'INPUT',
      name: 'sd',
      rules: [{ required: true, trigger: 'onSubmit' }]
    } //湿度
  }
}
let detail = {
  dysblx: 'STS',
  axdy: '50V',
  bxdy: '60V',
  cxdy: '70V',
  axdl: '50A',
  bxdl: '60A',
  cxdl: '70A',
  fz: '70V',
  wggl: '100kVar',
  yggl: '100千瓦',
  wd: '30',
  sd: '20'
}

import navBar from '../../../components/common/nav-bar'
import plateTitle from '../../../components/business/plateTitle.vue'
import { Dialog, Toast } from 'vant'

import { mapGetters } from 'vuex'
export default {
  name: 'addRouterPatrol',
  components: { navBar, plateTitle },
  props: {},
  data() {
    return {
      isView: false,
      currentTab: 'basicInfo', // 当前显示内容
      currentData: {}, // 当前基本信息
      showTimePicker: false,
      currentDate: '',
      minDate: new Date(0),
      showPicker: false,
      currentChangeItem: '', // 当前正在修改的下拉项
      chooseList: [],
      showPreview: false,
      showCustomInput: false, // 是否在下拉框中显示自定义输入
      delList: [], // 被删除的列表，需要和后台交互
      objId: '',
      taskId: '',
      taskSiteId: '',
      taskSiteName: '',
      taskType: '',
      defaultPickerIndex: 0, // picker默认选中索引
      currentPickerList: [], // 当前可选的项
      showNamePicker: false,
      showTorpPicker: false,
      typeColumns: [],
      stateColumns: [],
      keyIndex: '',
      typeIndex: '',
      routerId: ''
    }
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {},
  onLoad(options) {
    this.isView = options.s == 1 ? true : false

    this.objId = options.objId
    this.taskId = options.taskId
    this.taskSiteId = options.taskSiteId
    this.taskSiteName = options.taskSiteName
    this.taskType = options.state
    this.currentData = JSON.parse(JSON.stringify(infoOptical_add))
    if (this.isView) {
      Object.keys(detail).forEach(itemKey => {
        if (itemKey == 'dysblx' ) {
          this.currentData.visibleProps[itemKey].text = detail[itemKey]
        } else {
          this.currentData.visibleProps[itemKey].value = detail[itemKey]
        }
      })
    }
    this.currentData.hideProps = {
      // 新增业务线  taskid还未带过来，所属站点暂时不能选，
      parStationId: options.taskSiteId, //所属站点
      taskId: options.taskId, //所属工单id    //必填
      siteid: options.taskSiteId, //所属站点
      sitename: options.taskSiteName, //所属站点name
      tourOperId: this.userData.userId, //巡检人ID  必填      userId放进来
      tourOperName: this.userData.userName, //巡检人名称    必填       userName放进来
      producerIdCustom: '',
      modelnumberCustom: ''
    }
    this.currentData.visibleProps.sitename.value = this.taskSiteName


  
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: `/pages/inspectionMeeting/deviceList/index?s=${
          this.isView ? 1 : 0
        }`
      })
    },
    saveOptical() {
       Dialog.confirm({
          title: '新增成功',
          showCancelButton: false
        }).then(() => {
          uni.navigateTo({
            url: `/pages/inspectionMeeting/deviceList/index?s=${
              this.isView ? 1 : 0
            }`
          })
        })
      // this.$refs.formRule
      //   .validate()
      //   .then(() => {
      //     Toast.loading({
      //       duration: 0,
      //       message: '加载中...',
      //       forbidClick: true
      //     })
      //     let params = {
      //       ...this.currentData.hideProps,
      //       routerId: this.routerId,
      //       taskId: this.taskId,
      //       chooseList: this.chooseList
      //     }
      //     this.$api.insertRouterBuz(params).then(res => {
      //       if (res.code == 0) {
      //         Toast.clear()
      //         Dialog.confirm({
      //           title: '新增成功',
      //           showCancelButton: false
      //         }).then(() => {
      //           uni.navigateTo({
      //             url: `/pages/workBench/todoTask/routerPatrol/routerPatrol?objId=${this.objId}&taskId=${this.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${this.taskType}`
      //           })
      //         })
      //       }
      //     })
      //   })
      //   .catch(() => {
      //     Toast('请完善内容')
      //   })
    },
    // 基本信息下一步
    nextSave() {
      this.$refs.ruleForm
        .validate()
        .then(() => {
          this.baseInfoSubmit()
        })
        .catch(() => {
          Toast('请完善内容')
        })
    },
    baseInfoSubmit() {
      Toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true
      })
      let params = {
        ...this.currentData.hideProps,
        ...Object.values(this.currentData.visibleProps).reduce((prev, item) => {
          if (item.elementType === 'TIMEPICKER') {
            prev[item.keys] = item.text
          } else {
            prev[item.keys] = item.value
          }
          return prev
        }, {})
      }
      this.$api.insertRouter(params).then(res => {
        console.log(res.code, 423423423)
        if (res.code == 0) {
          Toast.clear()
          this.routerId = res.data
          this.currentTab = 'businessInfo'
        } else if (res.code == 500) {
          Toast.clear()
          Toast.fail(res.msg)
          uni.navigateTo({
            url: `/pages/workBench/todoTask/routerPatrol/routerPatrol?objId=${this.objId}&taskId=${this.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${this.taskType}`
          })
        } else {
          Toast.fail(res.msg)
        }
      })
    },
    checkInfo(item) {
      this.currentChangeItem = item.keys
    },
    // 在下拉框中改变选项
    pickerChange(curOption, curValue) {
      this.showCustomInput = curValue.text === '其他'
    },
    checkPickerList(optionItem) {
      this.currentChangeItem = optionItem.keys
      console.log(optionItem, 423423)
      this.showPicker = true
      if (optionItem.name == 'dysblx') {
        this.currentPickerList = [
          { text: 'ATS', value: 'ATS' },
          { text: 'STS', value: 'STS' }
        ]
      }

      // if(optionItem.elementType === "TIMEPICKER") {
      //   this.currentDate = this.currentData.visibleProps[this.currentChangeItem].text !== ""
      //       ? new Date(this.currentData.visibleProps[this.currentChangeItem].text)
      //       : new Date();
      //   this.showTimePicker = true;
      // }
      // // 下拉选项不为日期类型时，获取可选列表
      // else {
      //   this.showCustomInput = false;
      //   this.customInput = "";
      //   // 选项为设备型号时，请求传参带入设备品牌
      //   if(this.currentChangeItem === "modelnumber") {
      //     if(this.currentData.visibleProps.producerId.value === "") {
      //       Dialog.alert({
      //         message: '请先选择设备品牌',
      //         theme: 'round-button',
      //       });
      //       return;
      //     } else {
      //       optionItem.optionsParams.pid = this.currentData.visibleProps.producerId.value;
      //     }
      //   }

      //   if (this.currentChangeItem === 'parRoom') {
      //     optionItem.optionsParams.pid = this.currentData.hideProps.siteid;
      //   }
      //   if(optionItem.keys === "equStatus") {
      //     this.$api.todoTaskApi.selectList_Optical({kdCode:'DEVICE_ROLE'}).then(res => {
      //       this.currentPickerList = res.data.list.map(item => {
      //         return {
      //           origin: item,
      //           text: item.NAME,
      //           value: item.BRIEFNAME,
      //         }
      //       });
      //       this.showPicker = true;
      //     });
      //   } else if (optionItem.keys === "powerSupplyMode"){
      //     // 选项为电源供电方式
      //     this.$api.todoTaskApi.selectList_Optical({kdCode:'POWER_SUPPLY_MODE'}).then(res => {
      //       this.currentPickerList = res.data.list.map(item => {
      //         return {
      //           origin: item,
      //           text: item.NAME,
      //           value: item.BRIEFNAME,
      //         }
      //       });
      //       this.showPicker = true;
      //     });
      //   } else {
      //     // 获取可选列表
      //     this.$api.todoTaskApi.selectList_equipment(optionItem.optionsParams).then(async res => {
      //       await (this.showPicker = true);
      //       this.currentPickerList = res.data.map((item, index) => {
      //         if (item.TOTAL === this.currentData.visibleProps[this.currentChangeItem].text) {
      //           this.defaultPickerIndex = index;
      //           this.$refs.picker.setColumnIndex(0, index);
      //         }
      //         return {
      //           text: item.TOTAL,
      //           value: item.VALUE,
      //         }
      //       });
      //       // 如果选项为设备型号/设备品牌时，可自定义
      //       if(this.currentChangeItem === 'modelnumber' || this.currentChangeItem === 'producerId') {
      //         this.currentPickerList.push({
      //           text: '其他',
      //           value: 'other',
      //         })
      //         // 如果请求回来的下拉列表不包含当前表单项
      //         let includes = res.data.some((item, index) => {
      //           return item.TOTAL === this.currentData.visibleProps[this.currentChangeItem].text
      //         })
      //         if (!includes) {
      //           // 如果当前表单项的值为空，picker默认选中第一项
      //           if(this.currentData.visibleProps[this.currentChangeItem].text === '') {
      //             this.defaultPickerIndex = 0;
      //             this.$refs.picker.setColumnIndex(0, 0);
      //             // 如果下拉列表只有’其他‘，则显示自定义输入框
      //             if (this.currentPickerList.length === 1) {
      //               this.showCustomInput = true;
      //             }
      //           }
      //           // 如果当前表单项的值不为空，picker默认选至'其他'，自定义值默认填入当前下拉项的值
      //           else {
      //             this.showCustomInput = true;
      //             this.defaultPickerIndex = this.currentPickerList.length - 1;
      //             this.$refs.picker.setColumnIndex(0, this.currentPickerList.length - 1);
      //             this.customInput = this.currentData.visibleProps[this.currentChangeItem].text;
      //           }
      //         }
      //       }
      //     });
      //   }

      // }
    },
    inputBlur(value, item) {
      this.currentChangeItem = item.keys
      this.currentData.visibleProps[this.currentChangeItem].value = value
    },
    formatter(type, val) {
      if (type === 'year') return val + '年'
      if (type === 'month') return val + '月'
      if (type === 'day') return val + '日'
    },
    // picker确认选择(所有下拉)
    pickerConfirm(selectedOption) {
      if (this.currentChangeItem === 'begTim') {
        this.currentData.visibleProps[this.currentChangeItem].text =
          moment(selectedOption).format('YYYY-MM')
        this.showTimePicker = false
      } else {
        // 下拉列表不为空
        if (selectedOption !== undefined) {
          // 如果选择的设备品牌与上一次不同，设备型号清空
          if (
            this.currentChangeItem === 'producerId' &&
            selectedOption.value !==
              this.currentData.visibleProps.producerId.value
          ) {
            this.currentData.visibleProps.modelnumber.text = ''
            this.currentData.visibleProps.modelnumber.value = ''
            this.currentData.hideProps.producerIdCustom = ''
            this.currentData.hideProps.modelnumberCustom = ''
          }
          // 如果选择的设备型号与上一次不同，清空自定义设备型号
          else if (
            this.currentChangeItem === 'modelnumber' &&
            selectedOption.value !==
              this.currentData.visibleProps.modelnumber.value
          ) {
            this.currentData.hideProps.modelnumberCustom = ''
          }

          if (selectedOption.text === '其他') {
            this.currentData.visibleProps[this.currentChangeItem].value =
              selectedOption.value
            this.currentData.visibleProps[this.currentChangeItem].text =
              this.customInput
            this.currentData.hideProps[this.currentChangeItem + 'Custom'] =
              this.customInput
          } else {
            this.currentData.visibleProps[this.currentChangeItem].value =
              selectedOption.value
            this.currentData.visibleProps[this.currentChangeItem].text =
              selectedOption.text
          }
        }
        this.showPicker = false
      }
    },
    // 清空已选
    pickerEmpty(selectedOption) {
      if (this.currentChangeItem === 'begTim') {
        this.showTimePicker = false
        this.currentData.visibleProps[this.currentChangeItem].text = ''
      } else {
        this.showPicker = false
        this.currentData.visibleProps[this.currentChangeItem].text = ''
        this.currentData.visibleProps[this.currentChangeItem].value = ''
        if (selectedOption !== undefined) {
          selectedOption.text = ''
          selectedOption.value = ''
        }
        // 清空设备品牌，同时清空设备型号
        if (this.currentChangeItem === 'producerId') {
          this.currentData.visibleProps.modelnumber.text = ''
          this.currentData.visibleProps.modelnumber.value = ''
          this.currentData.hideProps.producerIdCustom = ''
          this.currentData.hideProps.modelnumberCustom = ''
        }
        // 清空设备型号
        else if (this.currentChangeItem === 'modelnumber') {
          this.currentData.hideProps.modelnumberCustom = ''
        }
      }
    },
    // 清空业务名称已选
    pickerNameEmpty() {
      this.showNamePicker = false
      this.chooseList[this.keyIndex].routerBuzName = ''
    },
    // 清空端口类型已选
    pickerTorpEmpty() {
      this.showTorpPicker = false
      this.chooseList[this.typeIndex].portType = ''
    },
    scanQrcode(item) {
      let _this = this
      wx.scanQRCode({
        desc: 'scanQRCode desc',
        needResult: 1,
        scanType: ['qrCode'],
        success: function (res) {
          _this.currentData.visibleProps.entityid.value = res.resultStr
        },
        error: function (res) {
          console.log('scanQRCode error', res)
        }
      })
    },

    handleSelecBuinessName(index) {
      this.keyIndex = index
      let params = {
        kdCode: 'BUSINESS_NAME'
      }
      this.$api.routerSelectList(params).then(res => {
        console.log(res, 321)
        if (res.code == 0) {
          this.showNamePicker = true
          this.$nextTick(() => {
            this.typeColumns = res.data.list.map((item, index) => {
              return {
                text: item.NAME,
                value: item.BRIEFNAME
              }
            })
          })
        }
        this.typeColumns = res.data.list.map(item => {
          return item.NAME
        })
      })
    },
    onTypeConfirm(value, index) {
      this.chooseList.map((item, key) => {
        if (key == this.keyIndex) {
          item.routerBuzName = value.text
        }
        return item
      })
      this.showNamePicker = false
    },
    onStateConfirm(value, index) {
      this.chooseList.map((item, key) => {
        if (key == this.typeIndex) {
          item.portType = value.text
        }
        return item
      })
      this.showTorpPicker = false
    },
    handleSelecBuiness(index) {
      this.typeIndex = index
      let params = {
        kdCode: 'PORT_TYPE'
      }
      this.$api.routerSelectList(params).then(res => {
        if (res.code == 0) {
          this.showTorpPicker = true
          this.$nextTick(() => {
            this.stateColumns = res.data.list.map((item, index) => {
              return {
                text: item.NAME,
                value: item.BRIEFNAME
              }
            })
          })
        }
        this.stateColumns = res.data.list.map(item => {
          return item.NAME
        })
      })
    },
    addType() {
      this.chooseList.push({
        routerBuzName: '',
        portType: '',
        slotc: '',
        subslot: '',
        portName: '',
        routerBuzNameRule: [
          {
            required: true,
            trigger: 'onSubmit'
          }
        ],
        portTypeRule: [
          {
            required: true,
            trigger: 'onSubmit'
          }
        ],
        slotcRule: [
          {
            required: true,
            trigger: 'onSubmit'
          }
        ],
        subSlotRule: [
          {
            required: true,
            trigger: 'onSubmit'
          }
        ],
        prorNameRule: [
          {
            required: true,
            trigger: 'onSubmit'
          }
        ]
      })
    },
    removeType(item, index) {
      this.chooseList.splice(index, 1)
    }
  }
}
</script>
<style scoped lang="scss">
.add-patrol-main {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(242, 246, 250, 1);
  .van-preview-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .van-swipe {
      width: 100%;
      height: 60%;
    }
    img {
      height: 90%;
    }
  }

  .cable-state {
    width: 100vw;
    height: px2vh(140);
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 px2vw(30) 0 px2vw(49);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cable-state-title {
      font-size: px2vw(42);
    }
    .cable-state-text {
      width: px2vw(220);
      height: px2vh(80);
      border-radius: px2vw(40);
      font-size: px2vw(42);
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      &.cable-state-on {
        color: rgba(255, 67, 85, 1);
        background-color: rgba(255, 67, 85, 0.1);
      }

      &.cable-state-off {
        color: rgba(65, 220, 131, 1);
        background-color: rgba(65, 220, 131, 0.1);
      }
    }
  }
  .patrol-info-tab {
    width: calc(100% - #{px2vw(60)});
    height: px2vh(120);
    border-radius: px2vw(20);
    box-sizing: border-box;
    margin: px2vh(40) px2vw(30) px2vh(37);
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .info-tab-item {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(51, 51, 51, 1);
      font-size: px2vw(38);
      &.info-tab-current {
        height: px2vh(100);
        margin-right: px2vw(10);
        border-radius: px2vw(20);
        background-color: rgba(65, 122, 220, 1);
        color: rgba(255, 255, 255, 1);
        font-weight: Bold;
      }
    }
  }
  .main-container {
    height: calc(100vh - #{px2vh(574)});
    overflow: auto;
    .cable-info {
      width: calc(100% - #{px2vw(60)});
      margin: auto;
      padding-bottom: px2vh(30);
      .plate-title {
        margin-bottom: px2vh(30);
      }
      .cable-info-container {
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;
        margin-bottom: px2vh(30);
      }
      .patrol-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;

        /deep/ .van-radio {
          margin-right: px2vw(139.5);
        }

        .image-wrap {
          width: 100%;
          display: flex;

          img {
            width: px2vw(215);
            height: px2vw(215);
            margin-right: px2vw(40);
            border-radius: px2vw(6);
          }

          .image-list {
            width: 100%;
            display: flex;
            .upload-button {
              width: px2vw(215);
              height: px2vw(215);
              background-size: cover;
              margin-right: px2vw(40);
              position: relative;
              .delete-icon {
                position: absolute;
                top: px2vw(-20);
                right: px2vw(-20);
                width: px2vw(40);
                height: px2vw(40);
                background-color: rgba(0, 0, 0, 0.7);
                border-radius: 50%;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
      .remark-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;
        margin-top: px2vh(40);
        margin-bottom: px2vh(40);

        .remark-wrap {
          background-color: #fafafa;
          padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
          border-radius: px2vw(20);

          .remark-text {
            height: px2vh(150);
          }
        }
      }
      .result-info-container {
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;
        .yellow {
          /deep/.van-cell__value {
            color: #ffad0e;
          }
        }
        .blue {
          /deep/.van-cell__value {
            color: #417adc;
          }
        }
        .green {
          /deep/.van-cell__value {
            color: #41dc83;
          }
        }
        .red {
          /deep/ .van-cell__value {
            color: #ff4355;
          }
        }
      }
    }
    .fibre-info {
      .plan-info-title {
        width: calc(100% - #{px2vw(60)});
        margin-left: px2vw(30);
        margin-bottom: px2vh(30);
        .palant-img {
          width: px2vw(60);
        }
      }
      .router-business {
        width: calc(100% - #{px2vw(60)});
        height: auto;
        margin-left: px2vw(30);
        background: #fff;
        border-radius: px2vw(20);
        margin-bottom: px2vh(30);
        .business-img {
          width: 100%;
          text-align: right;
          img {
            width: px2vw(60);
          }
        }
      }
      .patrol-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;

        /deep/ .van-radio {
          margin-right: px2vw(139.5);
        }

        .image-wrap {
          width: 100%;
          display: flex;

          img {
            width: px2vw(215);
            height: px2vw(215);
            margin-right: px2vw(40);
            border-radius: px2vw(6);
          }

          .image-list {
            width: 100%;
            display: flex;
            .upload-button {
              width: px2vw(215);
              height: px2vw(215);
              background-size: cover;
              margin-right: px2vw(40);
              position: relative;
              .delete-icon {
                position: absolute;
                top: px2vw(-20);
                right: px2vw(-20);
                width: px2vw(40);
                height: px2vw(40);
                background-color: rgba(0, 0, 0, 0.7);
                border-radius: 50%;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
      .remark-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;
        margin-top: px2vh(40);
        margin-bottom: px2vh(40);

        .remark-wrap {
          background-color: #fafafa;
          padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
          border-radius: px2vw(20);

          .remark-text {
            height: px2vh(150);
          }
        }
      }
      .result-info-container {
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;
        .yellow {
          /deep/.van-cell__value {
            color: #ffad0e;
          }
        }
        .blue {
          /deep/.van-cell__value {
            color: #417adc;
          }
        }
        .green {
          /deep/.van-cell__value {
            color: #41dc83;
          }
        }
        .red {
          /deep/ .van-cell__value {
            color: #ff4355;
          }
        }
      }
    }
  }
  /deep/ .van-field__label {
    width: 9em;
  }
  /deep/.van-button {
    width: calc(100% - #{px2vw(60)});
    margin: px2vh(50) auto px2vh(71);
    height: px2vh(120);
    color: #fff;
    background-color: #417adc;
    border: 1px solid #417adc;
    border-radius: px2vh(60);
  }
}
</style>
